{% extends "../layout.njk" %} 

{% block body %}
<div class="openAcc-main">
  <div class="ht-container">
    <div class="openAcc-prepair">
      <img src="/public/imgs/onlineCenter/prepair.png" alt="" style="width: 100%;">
    </div>
    <div class="ht-flex" style="height: 600px;margin-bottom: 60px;">
      <div class="openAcc-left">
        <div class="ht-tab ht-height-100">
          <div class="ht-tab-header ht-no-margin">
            <div class="ht-tab-item active">
              <span>
                PC端开户
              </span>
            </div>
            <div class="ht-tab-item">
              <span>
                手机端开户
              </span>
            </div>
          </div>
          <div class="ht-tab-panels">
            <div class="ht-tab-panel text-primary text-center active">
              <h1>
                <a href="https://hongtaqh.cfmmc.com/">
                  <i class="icon icon-desktop" style="font-size: 120px; line-height: 2;"></i>
                </a>
              </h1>
              <h3>
                PC端开户(点击图标，马上开户)
              </h3>
              <p class="text-muted">
                开户时间：9：00 - 17：00（交易日）
              </p>
            </div>
            <div class="ht-tab-panel text-primary text-center">
              <h1>
                <img src="/public/imgs/qr.png" alt="期货开户云" style="width: 180px;">
              </h1>
              <h3>
                手机端扫码下载
              </h3>
              <p class="text-muted">
                开户时间：9：00 - 17：00（交易日）
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="openAcc-right">
        <div class="card ht-no-border">
          <div class="card-header ht-flex active">
            <div class="text-primary" style="font-size: 24px;">PC端开户步骤</div>
            <div class="text-right">
              <a href="/cms/onlineCenter/pcAccount" class="text-dark no-underLine">详情指南></a>
            </div>
          </div>
          <div class="card-header ht-flex">
            <div class="text-primary" style="font-size: 24px;">手机端开户步骤</div>
            <div class="text-right">
              <a href="/cms/onlineCenter/mobileAccount" class="text-dark no-underLine">详情指南></a>
            </div>
          </div>
          <div class="card-body">
            <div class="openAcc-steps" style="text-align: center;padding: 95px 0;">
              <img src="/public/imgs/onlineCenter/oa.png" alt="开户步骤">
            </div>
          </div>
       </div>
        <div class="footer ht-flex no-padding">
          <div class="item">
            <div class="card ht-no-border">
              <div class="card-content">
                <a href="/cms/about/location" class="no-underLine">
                  <img src="/public/imgs/onlineCenter/locations.png" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="card ht-no-border">
              <div class="card-content">
                <a href="/cms/onlineCenter/qa" class="no-underLine">
                  <img src="/public/imgs/onlineCenter/qa.png" alt="">
                </a>
              </div>
            </div>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
  <script>
    let tabs = Array.prototype.slice.call($('.ht-tab-item'));
    let panels = $('.ht-tab-panel');
    let rHeader = $('.openAcc-right .card-header');
    tabs.forEach(function(ele,idx){
      $(ele).on('click', function(e) {
        for(let j = 0; j < tabs.length; j++){
          $(tabs[j]).removeClass('active');
          $(panels[j]).removeClass('active');
          $(rHeader[j]).removeClass('active');
        }
        $(ele).addClass('active');
        $(panels[idx]).addClass('active');
        $(rHeader[idx]).addClass('active');
      })
    })
  </script>
{% endblock %}